<template>
  <a-card style="margin-top: 24px" :bordered="false" title="量表评估首页">
    <a-table
      :loading="loading"
      :columns="columns"
      :data-source="data"
      bordered
      :rowKey="
        (record, index) => {
          return index
        }
      "
      :pagination="{ pageSize: 30 }"
    >
      <template v-for="col in ['name', 'age', 'address']" :slot="col" slot-scope="text, record">
        <div :key="col">
          <a-input
            v-if="record.editable"
            style="margin: -5px 0"
            :value="text"
            @change="(e) => handleChange(e.target.value, record.key, col)"
          />
          <template v-else>
            {{ text }}
          </template>
        </div>
      </template>
      <template slot="wrote" slot-scope="text, record">
        <span v-if="record.wrote == 0">未填写</span>
        <span v-else>{{ record.wrote}}次</span>
      </template>
      <template slot="operation" slot-scope="text, record, index">
        <div class="editable-row-operations">
          <span v-if="record.editable">
            <a @click="() => save(record.key)">Save</a>
            <a-popconfirm title="Sure to cancel?" @confirm="() => cancel(record.key)">
              <a>Cancel</a>
            </a-popconfirm>
          </span>
          <span v-else>
            <a-button type="primary" @click="show(index)"> 填写 </a-button>
          </span>
        </div>
      </template>
    </a-table>
  </a-card>
</template>
<script>
import { EvalutionMixin } from '@/mixins/EvalutionMixin'
import { PAGE_MENU_TYPE } from '@/store/mutation-types'

const columns = [
  {
    title: '序号',
    dataIndex: 'index',
  },
  {
    title: '量表名称',
    dataIndex: 'name',
  },
  {
    title: '简介',
    dataIndex: 'introduction',
  },
  {
    title: '答题时间',
    dataIndex: 'time',
    width: 100,
  },
  {
    title: '已填写',
    dataIndex: 'wrote',
    width: 80,
    scopedSlots: { customRender: 'wrote' },
  },
  {
    title: '点击填写量表',
    dataIndex: 'operation',
    scopedSlots: { customRender: 'operation' },
  },
]
const data = []
const urlpath = []

export default {
  name: 'index',
  mixins: [EvalutionMixin],
  data() {
    this.cacheData = data.map((item) => ({ ...item }))

    return {
      data,
      columns,
      editingKey: '',
      queryParam: { patientId: this.$route.query[PAGE_MENU_TYPE.PatientId] },
    }
  },
  created() {
    this.getEvalutionList()
  },
  methods: {
    show(index) {
      // const query = {}
      // query[PAGE_MENU_TYPE.ParamsField] = PAGE_MENU_TYPE.HealthManage
      // query[PAGE_MENU_TYPE.PatientId] = this.queryParam.patientId
      // const routeUrl = this.$router.push({ path: this.data[index].url, query })
      // window.open(routeUrl.href, '_self')

      const patientId = this.$route.query[PAGE_MENU_TYPE.PatientId]
      let query = {}
      query[PAGE_MENU_TYPE.ParamsField] = PAGE_MENU_TYPE.HealthManage
      query[PAGE_MENU_TYPE.PatientId] = patientId
      this.$router.push({
        path: this.data[index].url,
        query,
      })
      // this.$router.push({
      //   path: this.data[index].url,
      // path: './behavior/Sdsca',
      // 路由携带参数
      // query: {
      //   patientId: this.queryParam.patientId,
      // },
      //         const query = {}
      // query[PAGE_MENU_TYPE.ParamsField] = PAGE_MENU_TYPE.HealthManage
      // query[PAGE_MENU_TYPE.PatientId] = id
      // const routeUrl = this.$router.resolve({ path: '/patient/index', query })
      // window.open(routeUrl.href, '_blank')
      // })
    },
    handleChange(value, key, column) {
      const newData = [...this.data]
      const target = newData.filter((item) => key === item.key)[0]
      if (target) {
        target[column] = value
        this.data = newData
      }
    },
    edit(key) {
      const newData = [...this.data]
      const target = newData.filter((item) => key === item.key)[0]
      this.editingKey = key
      if (target) {
        target.editable = true
        this.data = newData
      }
    },
    save(key) {
      const newData = [...this.data]
      const newCacheData = [...this.cacheData]
      const target = newData.filter((item) => key === item.key)[0]
      const targetCache = newCacheData.filter((item) => key === item.key)[0]
      if (target && targetCache) {
        delete target.editable
        this.data = newData
        Object.assign(targetCache, target)
        this.cacheData = newCacheData
      }
      this.editingKey = ''
    },
    cancel(key) {
      const newData = [...this.data]
      const target = newData.filter((item) => key === item.key)[0]
      this.editingKey = ''
      if (target) {
        Object.assign(target, this.cacheData.filter((item) => key === item.key)[0])
        delete target.editable
        this.data = newData
      }
    },
  },
}
</script>
<style scoped>
.ant-table-thead > tr:first-child > th:first-child {
  width: 10px;
}
.editable-row-operations a {
  margin-right: 8px;
}
.evalutionTitle {
  text-align: center;
  font-size: 20px;
  font-weight: 700;
}
.ant-table-bordered .ant-table-thead > tr > th,
.ant-table-bordered .ant-table-tbody > tr > td {
  text-align: center;
}
</style>
